import AntDesign from "@expo/vector-icons/AntDesign";
import React, { useEffect, useRef, useState } from "react";
import { Animated, TouchableOpacity } from "react-native";
type Props = {
  value: boolean;
  onValueChanged?: (value: boolean) => void;
  size?: number;
  color?: string;
};
// eslint-disable-next-line react/display-name
export default (props: Props) => {
  const { value, onValueChanged, size = 20, color = "black" } = props;
  const [showState, setShowState] = useState<boolean>(false);
  const scale = useRef<Animated.Value>(new Animated.Value(0)).current;
  const alpha = useRef<Animated.Value>(new Animated.Value(0)).current;
  useEffect(() => {
    setShowState(value);
  }, [value]);
  const onHeartPress = () => {
    const newState = !showState;
    setShowState(newState);
    onValueChanged?.(newState);
    if (newState) {
      alpha.setValue(1);
      const scaleAnim = Animated.timing(scale, {
        toValue: 1.8,
        duration: 300,
        useNativeDriver: false,
      });
      const alphaAnim = Animated.timing(alpha, {
        toValue: 0,
        duration: 400,
        useNativeDriver: false,
        delay: 200,
      });
      Animated.parallel([scaleAnim, alphaAnim]).start();
    } else {
      scale.setValue(0);
      alpha.setValue(0);
    }
  };
  return (
    <TouchableOpacity onPress={onHeartPress}>
      {showState ? (
        <AntDesign name="heart" size={size} color="red" />
      ) : (
        <AntDesign name="hearto" size={size} color={color} />
      )}
      <Animated.View
        style={{
          width: size,
          height: size,
          borderRadius: size / 2,
          borderWidth: size / 20,
          position: "absolute",
          borderColor: "#ff2442",
          transform: [{ scale: scale }],
          opacity: alpha,
        }}
      />
    </TouchableOpacity>
  );
};
